/**
 * @desc: 对货数据
 * @author: fj
 */
import { useState, useEffect, useMemo } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import TableList from './component/TableList';
import FormRender from '@/components/FormRender';
import { getFormItem } from './config.js';
import { useResize } from '@/hooks/useResize';
import moment from 'moment';

const initQuery = {
  time: [
    moment().startOf('day').subtract(7, 'days'),
    moment().endOf('day').subtract(0, 'days'),
  ],
};

const OfflineRechargeList = () => {
  const [query, setQuery] = useState({ ...initQuery });
  const [tableKey, setTableKey] = useState(0);
  const navigate = useNavigate();
  const location = useLocation();

  //监听变更
  const { el: headerEl, height: headerHeight } = useResize();

  //表单数据
  const formArr = useMemo(() => {
    return getFormItem();
  }, [])

  useEffect(() => {
    if (location.pathname == '/account/offlineRechargeList') {
      if (location?.state?.type) {
        setTableKey(tableKey + 1);
        navigate(location.pathname, { replace: true });
      }
    }
  }, [location.pathname]);

  useEffect(() => {
    setTableKey(tableKey + 1);
  }, []);

  //表单渲染组件
  const FormRenderProps = {
    query,
    formArr,
    formConfig: {
      name: 'offline-recharget-list-form',
      style: { marginBottom: '16px' }
    },
    clickSearch(val) {
      setQuery(val);
      setTableKey(tableKey + 1);
    },
    clickReset() {
      setQuery({ ...initQuery });
      setTableKey(tableKey + 1);
    },
  }

  //展示部分
  const TableListProps = {
    query,
    tableKey,
    headerHeight,
  };

  return (
    <>
      <div ref={headerEl}>
        <FormRender {...FormRenderProps} />
      </div>
      <div className='global-page-wrap'>
        <TableList {...TableListProps} />
      </div>
    </>
  );
};

export default OfflineRechargeList;
